<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加表格内容</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            margin: 30px auto;
        }
        h4{
            font-weight:normal ;
            margin-bottom: 10px;
        }
        table{
            width:100%;
            /* height: 60px; */
            margin-top: 10px;
            border-collapse: collapse;
        }
        thead{
            background-color: plum;
        }
        #manges td{
            height: 35px;
            line-height: 35px;
            text-align: center;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 题目描述
    用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，
    具体表现如下图：
    如果输入框内容有一项为空，弹出对话框,信息是‘请将数据填入完全’，
    否则，在表格中新建一行，单元格中分别显示对应文本框中的数据 -->
    <div>
        <h4>请输入姓名：<input class="input1" type="text" value="小白"></h4>
        <h4>请输入邮箱：<input class="input2" type="text" value="xiaobai@itcast.cn"></h4>
        <input type="button" value="添加" id="btn">
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>邮箱</th>
                </tr>
            </thead>
            <tbody id="manges">
                <tr>
                    <td>小黑</td>
                    <td>xiaohei@126.cm</td>
                </tr>
                <tr>
                    <td>小白</td>
                    <td>xiaobai@itcast.cn</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        //文本框获得焦点，清除提示信息
        var txt1=document.querySelector('.input1');
        var txt2=document.querySelector('.input2');
        // 文本框失去焦点，没有内容
        txt1.onfocus=function(){
            this.value='';
        }
        // txt1.onblur=function(){
        //     if(!this.value){
        //         this.value='小白';
        //     }
        // }
        txt2.onfocus=function(){
            this.value='';
        }
        // txt2.onblur=function(){
        //     if(!this.value){
        //         this.value='xiaobai@itcast.cn';
        //     }
        // }
        var btn=document.querySelector('#btn')
        var tbody=document.querySelector('#manges');//找到表格
        btn.onclick=function(){
            if(txt1.value==''||txt1.value==null || txt2.value==''|| txt2.value==null){
                alert('请填写完整');
            }else{
                var newtr=document.createElement('tr');//创建行
                var td1=document.createElement('td');//创建列       
                var td2=document.createElement('td');   

                td1.innerHTML=txt1.value;
                td2.innerHTML=txt2.value;

                tbody.appendChild(newtr);//向表格里添加行
                newtr.appendChild(td1);//向行内添加列
                newtr.appendChild(td2);
            }
        }
    </script>
</body>
</html>